<template>
    <ManageCard ref="manageCard" :numberOfEntries="bodyData.totalElements" @fulsh="getBodyData"
        @currentChange="currentChange" :isShowAddBtn="false" @clickOfAddBtn="clickOfAddBtn"
        :page-size="requestParam.pageSize" :page-number="requestParam.pageNumber">
        <el-table
        max-height="calc(100vh - 255px)" :data="bodyData.content" style="width: 100%;">
            <!-- 序号 -->
            <el-table-column type="index" width="60px"></el-table-column>
            <!-- 用户id -->
            <el-table-column label="用户id" width="200px">
                <template #header>
                    <div class="item-title">用户ID</div>
                    <div><el-input v-model="requestParam.data.and.eq[0].userId" :placeholder="store.appFront.search"
                            size="mini" clearable @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.userId }}</div>
                </template>
            </el-table-column>

            <el-table-column label="头像" width="200px">
                <template #header>
                    <div class="item-title">头像</div>
                </template>

                <template #default="scope">

                    <el-image :src="$kt.file.visit(scope.row.user.fileIdOfAvatar)" :z-index="9999"
                        :preview-teleported="true" :initial-index="1" fit="cover" style="width: 50px; height: 50px"
                        :preview-src-list="[$kt.file.visit(scope.row.user.fileIdOfAvatar)]" />
                </template>
            </el-table-column>


            <!-- 用户昵称 -->
            <el-table-column label="用户昵称" width="200px">
                <template #header>
                    <div class="item-title">用户昵称</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].user.nickname"
                            :placeholder="store.appFront.search" size="mini" clearable
                            @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.user.nickname }}</div>
                </template>
            </el-table-column>

            <!-- 一级行政区 requestParam.data.and.vague[0].location.province -->
            <el-table-column label="一级行政区" width="200px">
                <template #header>
                    <div class="item-title">一级行政区</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].location.province"
                            :placeholder="store.appFront.search" size="mini" clearable
                            @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.location.province }}</div>
                </template>
            </el-table-column>

            <!-- 二级行政区 requestParam.data.and.vague[0].location.city -->
            <el-table-column label="二级行政区" width="200px">
                <template #header>
                    <div class="item-title">二级行政区</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].location.city"
                            :placeholder="store.appFront.search" size="mini" clearable
                            @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.location.city }}</div>
                </template>
            </el-table-column>


            <!-- 三级行政区 requestParam.data.and.vague[0].location.district -->
            <el-table-column label="三级行政区" width="200px">
                <template #header>
                    <div class="item-title">三级行政区</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].location.district"
                            :placeholder="store.appFront.search" size="mini" clearable
                            @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.location.district }}</div>
                </template>
            </el-table-column>

            <el-table-column label="经度" width="200px">
                <template #header>
                    <div class="item-title">经度</div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.location.longitude }}</div>
                </template>
            </el-table-column>

            <el-table-column label="纬度" width="200px">
                <template #header>
                    <div class="item-title">纬度</div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.location.latitude }}</div>
                </template>
            </el-table-column>


            <!-- 自我介绍 requestParam.data.and.vague[0].introduction -->
            <el-table-column label="自我介绍" width="200px">
                <template #header>
                    <div class="item-title">自我介绍</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].introduction"
                            :placeholder="store.appFront.search" size="mini" clearable
                            @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.introduction }}</div>
                </template>
            </el-table-column>


            <!-- 性别 -->
            <el-table-column label="性别" width="200px">
                <template #header>
                    <div class="item-title">性别</div>
                    <div>
                        <!-- 选择性别 -->
                        <el-select v-model="requestParam.data.and.eq[0].user.gender" @change="getBodyData" class="m-2"
                            placeholder="Select" size="mini">
                            <el-option v-for="item in [
                                { value: null, label: '全部' },
                                { value: 0, label: '女' },
                                { value: 1, label: '男' }
                            ]" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>

                    </div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ scope.row.user.gender == 0 ? '女' : '男' }}</div>
                </template>
            </el-table-column>

            <!-- sexualOrientationMap -->

            <!-- 性取向 -->
            <el-table-column label="性取向" width="200px">
                <template #header>
                    <div class="item-title">性取向</div>
                    <div>
                        <!-- 选择性取向 -->
                        <el-select v-model="requestParam.data.and.eq[0].sexualOrientationCode" @change="getBodyData"
                            class="m-2" placeholder="Select" size="mini">
                            <el-option v-for="item in [
                                {
                                    code: null,
                                    name: '全部'
                                },
                                ...sexualOrientationList
                            ]" :key="item.code" :clearable="true" :label="item.name" :value="item.code" />
                        </el-select>
                    </div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">{{ sexualOrientationMap[scope.row.sexualOrientationCode] }}</div>
                </template>
            </el-table-column>

            <!-- emotionalOrientationList -->
            <el-table-column label="情感取向" width="200px">
                <template #header>
                    <div class="item-title">情感取向</div>
                    <div><el-input v-model="requestParam.data.and.vague[0].emotionalOrientationList[0].name"
                            :placeholder="store.appFront.search" size="mini" clearable
                            @keyup.enter="getBodyData"></el-input></div>
                </template>

                <template #default="scope">
                    <div style="text-align: center;">

                        <el-tag style="margin: 5px;" v-for="item in scope.row.emotionalOrientationList" :key="item.code"
                            size="mini" type="info">{{ item.name }}</el-tag>
                    </div>
                </template>
            </el-table-column>




            <!-- 创建时间 -->
            <el-table-column width="300px">
                <template #header>
                    <div class="item-title">{{ store.appFront.createTime }}</div>
                    <!-- 时间选择器 -->
                    <div style="width: 100%;text-align: center;">
                        <!-- 开始时间 -->
                        <el-date-picker style="width: 100px;" v-model="requestParam2.createStart" type="datetime"
                            size="mini" :placeholder="store.appFront.startTime" @change="getBodyData">
                        </el-date-picker>
                        <!-- 结束时间 -->
                        <el-date-picker style="width: 100px;" v-model="requestParam2.createEnd" type="datetime" size="mini"
                            :placeholder="store.appFront.endTime" @change="getBodyData">
                        </el-date-picker>

                    </div>
                </template>
                <template #default="scope">
                    <div style="text-align: center;">{{ $kt.date.format(scope.row.gmtCreate, "yyyy-MM-dd HH:mm:ss") }}
                    </div>
                </template>
            </el-table-column>



            <!-- 操作，固定位置 -->
            <el-table-column v-if="false" fixed="right" :width="'125px'">
                <template #default="scope">
                    <el-button type="text" ref="editButton" size="small" @click="dialogOfSaveInTableCard.open(scope.row)">
                        <el-icon :size="15">
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-popconfirm width="200px" :title="store.appFront.deletePrompt"
                        :confirm-button-text="store.appFront.confirm" :cancel-button-text="store.appFront.cancel"
                        @confirm="toDelete(scope.row)">
                        <template #reference>
                            <el-button type="text" ref="deleteButton" style="color: #f56c6c" size="small">
                                <el-icon :size="15">
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>

        </el-table>
    </ManageCard>
    <DialogOfSaveInTableCard ref="dialogOfSaveInTableCard" :requestParam="requestParam" />
</template>

<script lang="ts" setup>
import DialogOfSaveInTableCard from './DialogOfSaveInTableCard.vue';
import { ref, defineExpose, onMounted } from 'vue';
import $kt from '@/vueKantboot';
import { useStore } from '@/stores/counter';
import ManageCard from '@/views/manage/components/ManageCard.vue';

let store = useStore();

let byteLength = (str: string) => {
    return str.replace(/[^x00-xFF]/g, '**').length;
}
let dialogOfSaveInTableCard = ref();
let manageCard = ref();
let requestParam2 = ref({
    createStart: null,
    createEnd: null,
});

let requestParam = ref(
    {
        "pageNumber": 1,
        "pageSize": 30,
        "sortType": "DESC",
        "sortField": "gmtCreate",
        "data": {
            "and": {
                eq: [
                    {
                        "sexualOrientationCode": null,
                        "userId": null,
                        "user": {
                            "nickname": null,
                            "gender": null,
                        }
                    }
                ],
                vague:
                    [
                        {

                            "user": {
                                "nickname": null
                            },
                            "location": {
                                "province": null,
                                "city": null,
                                "district": null
                            },
                            introduction: null,
                            "emotionalOrientationList": [
                                {
                                    "code": null,
                                    "genderLimit": null,
                                    "id": null,
                                    "name": null,
                                    "sexualOrientationLimit": null
                                }
                            ]
                        }
                    ]
                ,
                "ge": [
                    {
                        gmtCreate: null
                    }
                ],
                "le": [
                    {
                        gmtCreate: null
                    }
                ]
            },

            "entity": {},
        }
    }
);

let bodyData = ref({
    "number": 1,
    "size": 5,
    "totalPage": 0,
    "totalElements": 0,
    "gmtModified": "2023-04-10 17:02:26",
    "content": [
        {
            "emotionalOrientationList": [
                {
                    "code": "sapiosexual",
                    "genderLimit": -1,
                    "id": 1,
                    "name": "智性恋",
                    "sexualOrientationLimit": false
                }
            ],
            "gmtCreate": 1688028585716,
            "gmtModified": 1688028585949,
            "introduction": "3",
            "location": {
                "adCode": "330109",
                "city": "杭州市",
                "country": "中国",
                "countryCode": "156",
                "district": "萧山区",
                "gmtCreate": 1688028590139,
                "gmtModified": 1688028590139,
                "gmtTencentMapApiTime": 1688028590066,
                "latitude": 30.18534,
                "longitude": 120.26457,
                "province": "浙江省",
                "userId": 433734305054725
            },
            "sadomasochismAttrCode": "sado",
            "sexualOrientationCode": "woman",
            "user": {
                "birthday": 31507200000,
                "fileIdOfAvatar": 433734381862917,
                "gender": 1,
                "gmtCreate": 1688028565812,
                "gmtModified": 1688028585412,
                "id": 433734305054725,
                "nickname": "方某方",
                "roles": [

                ]
            },
            "userId": 433734305054725
        }

    ],
});

let groupCodeSelected = ref('');

let roleList = ref([{
    "code": "systemAdmin",
    "name": "系统管理员"
}]);

let getRoleList = () => {
    $kt.request.request({
        url: '/adminManage/system/role/getList',
        method: 'post',
        data: {},
    }).then((res: any) => {
        roleList.value = res.data.data;
    });
};



getRoleList();


let toDelete = (item: any) => {
    $kt.request.request({
        url: '/adminManage/system/user/delete',
        method: 'post',
        data: item,
    }).then((res: any) => {
        getBodyData();
    });
};

let getBodyData = () => {

    if (requestParam.value.data.and.vague[0].emotionalOrientationList[0].name == "") {
        requestParam.value.data.and.vague[0].emotionalOrientationList[0].name = null;
    }

    if (requestParam2.value.createStart != null && requestParam2.value.createStart != "") {
        requestParam.value.data.and.ge[0].gmtCreate = new Date().getTime();
    } else {
        requestParam.value.data.and.ge[0].gmtCreate = null;
    }
    if (requestParam2.value.createEnd != null && requestParam2.value.createEnd != "") {
        requestParam.value.data.and.le[0].gmtCreate = new Date().getTime();
    } else {
        requestParam.value.data.and.le[0].gmtCreate = null;
    }


    $kt.request.request({
        url: '/adminManage/business/ovo/user/getPage',
        method: 'post',
        data: requestParam.value,
    }).then((res: any) => {
        bodyData.value = res.data.data;
    });
};

let currentChange = (val: any) => {
    requestParam.value.pageNumber = val;
    getBodyData();
};
getBodyData();

let clickOfAddBtn = () => {
    dialogOfSaveInTableCard.value.open();
};

// business/ovo/sexualOrientation/getMap
/**
 * 性取向字典
 */
let sexualOrientationMap = {

}

let getSexualOrientationMap = () => {
    $kt.request.request({
        url: '/business/ovo/sexualOrientation/getMap',
        method: 'post',
        data: {},
    }).then((res: any) => {
        sexualOrientationMap = res.data.data;
    });
}

// business/ovo/sexualOrientation/getList

/**
 * 性取向列表
 */
let sexualOrientationList = [

]

let getSexualOrientationList = () => {
    $kt.request.request({
        url: '/business/ovo/sexualOrientation/getList',
        method: 'post',
        data: {},
    }).then((res: any) => {
        sexualOrientationList = res.data.data;
    });
}

getSexualOrientationMap();
getSexualOrientationList();



defineExpose({
});
</script>


<style lang="scss" scoped>
.card {
    position: relative;
    height: 100%;
    box-shadow: none;
    border: 2px solid #ebeef5;
}

.title {
    color: #666666;
    text-align: center;
}

.cell-class {
    cursor: pointer;
}

.refresh:active {
    transform: rotate(45deg);
}

.no {
    color: #999999;
    text-align: center;
}

.item-title {
    text-align: center;
}

.el-table {

    .el-table__fixed {

        height: auto !important;

        bottom: 17px !important;

    }

}

</style>